<%--
  Created by IntelliJ IDEA.
  User: 周星星
  Date: 2021/10/8
  Time: 19:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>我的订单</title>
    <link href="${pageContext.request.contextPath}/css/common.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/order/my_order.css" rel="stylesheet">
    <link href="http://r1nxp2i0y.hn-bkt.clouddn.com/images/ico.png" rel="icon" type="image/x-ico"/>

    <style>
        .myOrderList{
            position: relative;
            left: 10px;
        }
        table {
            width: 970px;
            border-collapse: collapse;
            border-spacing: 0;
        }
        .ui-table-list th {
            display: inline-block;
            font-size: 14px;
            margin-top: 30px;
            color: #666;
        }
        .ui-table-list td, .ui-table-list th {
            padding: 11px;
            text-align: left;
            color: #666;
        }
        .ui-table-list tr{
            display: inline-block;
            margin-left: 25px;
        }
        .ui-table-list td {
            display: inline-block;
            font-size: 12px;
        }
        .ui-table-list td>a{
            color: #23b7b7;
        }
        .row_number{
            width: 120px;
            margin-top: -20px;
            margin-left: -19px;
        }
        .row-first-cell{
            width: 200px;
            position: relative;
            left: -20px;
            top: -10px;
        }
        .row-second-cell{
            position: relative;
            left: 65px;
            top: -10px;
        }
        .row-third-cell{
            position: relative;
            left: 120px;
            top: -10px;
        }
        .gray {
            color: #d4d4d4;
            margin-left: 835px;
            position: relative;
            top: -48px;
        }
        .order_page{
            display: inline-block;
            width: 1000px;
            height: 40px;
            font-size: 15px;
            position: relative;
            top: -20px;
            left: 240px;
        }
    </style>

</head>
<body>
<jsp:include page="../message.jsp"/>

<%--<div>${serverResponse}</div>--%>
<!--=======================================1. 标题================================================-->
<jsp:include page="../util/top.jsp"/>
    <!------------------------------------------2.banner--------------------------------------------->
    <div class="banner">
        <div class="banner_inner">
        <span>当前位置:</span>
        <span class="banner_myCar">我的小橘></span>
        <span>订单管理</span>
        </div>
    </div>
    <!------------------------------------------2.当前位置main--------------------------------------------->
    <div id="content">
        <div class="content-bd">
            <div class="col-sub">
                <dl class="sub-nav">
                    <dt>我的订单</dt>
                    <dd><a href="${pageContext.request.contextPath}/to_my_order">订单管理</a></dd>
                    <dt>我的资产</dt>
                    <dd><a>账户余额</a></dd>
                    <dd><a href="${pageContext.request.contextPath}/myCoupon/${loginCustomer.custId}">我的优惠券</a></dd>
                    <dd><a href="${pageContext.request.contextPath}/favorite/${loginCustomer.custId}">我的收藏</a></dd>
                    <dt>个人中心</dt>
                    <dd><a href="${pageContext.request.contextPath}/user_center/${loginCustomer.custId}">用户信息</a></dd>
                    <dd><a>申请注销账户</a></dd>
                </dl>
            </div>

            <div class="col-main">
                <div class="orderdown">
                    <span class="orderdown_select">自驾订单</span>
                </div>


                    <div class="hd clearfix">
                        <ul class="ui-tab-hd" id="ui-tab-hd">
                            <li  class="ck clicked-css"><a href="javascript:void(0)"id="ck">全部订单</a></li>
                            <li><a class="submitBtn" href="javascript:void(0)">进行中</a></li>
                            <li><a class="submitBtn"  href="javascript:void(0)">已完成</a></li>
                            <li><a class="submitBtn" href="javascript:void(0)">已取消</a></li>
                        </ul>
                    </div>

                    <div class="ui-table-list all"><table >
                        <tbody><tr>
                            <th class="ui-table-list_number">订单编号</th>
                            <th class="ui-table-list_type">车型</th>
                            <th class="ui-table-list_getTime">取车时间</th>
                            <th class="ui-table-list_return">还车时间</th>
                            <th class="ui-table-list_status">订单状态</th>
                        </tr>


                        <tr class="myOrderList">
                              <%--  <td class="row_number"> 541686416874</td>
                                <td class="row-first-cell">
                                    QX50/SUV/自动 /0
                                </td >
                                <td class="row-second-cell">
                                    2021-08-23 18:18:18
                                </td>
                                <td class="row-third-cell">
                                    2021-10-05 18:18:00
                                </td>

                                <td>
                                    <span class="gray">已完成</span>
                                </td>--%>
                        </tr>

                        </tbody></table>



                    </div>




            </div>

            <div class="order_page" style="list-style: none">
                <%-- 共有<span></span>条数据
                 当前是第<span></span>页
                 <a href="javascript:getByPage()">上一页</a>
                 <a href="javascript:getByPage()">上一页</a>
                 共有<span></span>页--%>
            </div>

        </div>
    </div>
<!--底部页面-->
<div class="footer">
    <div class="footer-box clear_float">
        <div class="footer-left">
            <p><a href="" >关于小橘</a>
                |<a href="" >移动客户端</a>
                |<a href="" >帮助中心</a>
                |<a href="" >建议专区</a>
                |<a href="" >联系我们</a>
                |<a href="" >友情链接</a>
                | &nbsp;投诉通道：400-821-1608 &nbsp;
            </p>
            <p>
                Copyright © 2007 - 2021 苏州小橘信息技术服务有限公司
                <a href="" >ICP证：沪B2-20140130</a>
            </p>
        </div>
        <div class="footer-right">
            <a href="">
                <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_first.png" alt="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_first.png">
            </a>
            <a href="">
                <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_second.png" alt="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_second.png">
            </a>
            <a href="">
                <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_third.png" alt="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_third.png">
            </a>
            <a href="">
                <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_forth.png" alt="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_forth.png">
            </a>
        </div>
    </div>
</div>
<script>

    /*==============================页面刷新的渲染===================================*/
   var url = "${pageContext.request.contextPath}/my_order/";
   var custId = "${loginCustomer.custId}";
   getByPage(custId,-1,1);
   function getByPage(custId,status,pageNum){

    $.get(url,
        {
            custId:custId,
            status:status,
            pageNum:pageNum
        },
        function (result){
            console.log(JSON.stringify(result))

            if(result.code == 200) {
                $(".order_page").html("");
                $(".myOrderList").html("");
                var orderLi=result.data.list;
                for (var i = 0; i < orderLi.length; i++) {
                    var orderNum = orderLi[i].myOrder.myOrderNumber;
                    console.log("订单编号为:" + orderNum);
                    var carName = orderLi[i].car.carName;
                    console.log("车辆名称为:" + carName);
                    var carType = orderLi[i].car.carType;
                    console.log("车辆型号为:" + carType);
                    var carShiftType = orderLi[i].car.carShiftType;
                    console.log("汽车变速箱类型为:" + carShiftType);
                    var carDisplacement = orderLi[i].car.carDisplacement;
                    console.log("汽车排放量为:" + carDisplacement);
                    var carTime = orderLi[i].myOrder.getCarTime;
                    console.log("取车时间为:" + carTime);
                    var returnCarTime = orderLi[i].myOrder.returnCarTime;
                    console.log("还车时间为:" + returnCarTime);
                    var orderStatus = orderLi[i].myOrder.status;
                    console.log("订单状态为:" + orderStatus);

                    if (orderStatus == 1)
                        orderStatus = "进行中";
                    else if (orderStatus == 0)
                        orderStatus = "已完成";
                    else if (orderStatus == 4)
                        orderStatus = "已取消";
                    else if (orderStatus == 2)
                        orderStatus = "已付款"
                    else if (orderStatus == 3)
                        orderStatus = "待支付"


                    var myOrderEle = '  <td class="row_number"> ' + orderNum + '</td>\n' +
                        '                                <td class="row-first-cell">\n' +
                        '                                    ' + carName + '/' + carType + '/' + carShiftType + '/' + carDisplacement + '\n' +
                        '                                </td >\n' +
                        '                                <td class="row-second-cell">\n' +
                        '                                    ' + carTime + '\n' +
                        '                                </td>\n' +
                        '                                <td class="row-third-cell">\n' +
                        '                                    ' + returnCarTime + '\n' +
                        '                                </td>\n' +
                        '\n' +
                        '                                <td>\n' +
                        '                                    <span class="gray">' + orderStatus + '</span>\n' +
                        '                                </td>'
                    $(".myOrderList").append(myOrderEle);
                }

                var total = result.data.total;
                console.log("共有" + total + "条数据");
                var pageNum = result.data.pageNum;
                console.log("当前是第" + pageNum + "页");
                var pages = result.data.pages;
                console.log("共有" + pages + "页");
                var prePage = result.data.prePage;
                console.log("上一页是" + prePage);
                var nextPage = result.data.nextPage;
                console.log("下一页是" + nextPage);
                var hasPreviousPage = result.data.hasPreviousPage;
                var hasNextPage = result.data.hasNextPage;
                var orderEle;
                orderEle = '共有<span style="color: #666">' + total + '</span>条数据';
                orderEle += '当前是第<span style="color: #666">' + pageNum + '</span>页';
                if (hasPreviousPage) {
                    orderEle += ' <a href="javascript:getByPage(' + custId + ',' + status + ',' + prePage + ')" style="color: #FFB500">上一页</a>';
                }

                if (hasNextPage) {
                    orderEle += ' <a href="javascript:getByPage(' + custId + ',' + status + ',' + nextPage + ')" style="color: #FFB500">下一页</a>';
                }
                orderEle += ' 共有<span style="color: #666">' + pages + '</span>页';

                $(".order_page").append(orderEle);
            }else{
                $(".myOrderList").html("");
            }

        } ,"json")
   }





/*=========================================点击事件的渲染====================================*/
    $("#ui-tab-hd").click(function (event){
        var target = event.target;
        var custId = "${loginCustomer.custId}";
        var text =  target.parentElement.parentElement.children[0].innerText;
        if(text == "全部订单") {
            var status = target.innerText;
            var allLi = target.parentElement.parentElement.children;
            console.log(allLi[1])
            for (var i = 0; i < allLi.length; i++) {
                allLi[i].firstElementChild.classList.remove("clicked-css");
            }
            target.classList.add("clicked-css");

            console.log(status)
            console.log(custId)
            if (status == "进行中")
                status = 1;
            else if (status == "已完成")
                status = 0;
            else if (status == "已取消")
                status = 4;
            else if (status == "全部订单")
                status = -1;


            var url = "${pageContext.request.contextPath}/my_order/";
            var custId = "${loginCustomer.custId}";
            getByPage(custId,status,1);
            function getByPage(custId,status,pageNum){

                $.get(url,
                    {
                        custId:custId,
                        status:status,
                        pageNum:pageNum
                    },
                    function (result){
                        console.log(JSON.stringify(result))

                        if(result.code == 200) {
                            $(".order_page").html("");
                            $(".myOrderList").html("");
                            var orderLi=result.data.list;
                            for (var i = 0; i < orderLi.length; i++) {
                                var orderNum = orderLi[i].myOrder.myOrderNumber;
                                console.log("订单编号为:" + orderNum);
                                var carName = orderLi[i].car.carName;
                                console.log("车辆名称为:" + carName);
                                var carType = orderLi[i].car.carType;
                                console.log("车辆型号为:" + carType);
                                var carShiftType = orderLi[i].car.carShiftType;
                                console.log("汽车变速箱类型为:" + carShiftType);
                                var carDisplacement = orderLi[i].car.carDisplacement;
                                console.log("汽车排放量为:" + carDisplacement);
                                var carTime = orderLi[i].myOrder.getCarTime;
                                console.log("取车时间为:" + carTime);
                                var returnCarTime = orderLi[i].myOrder.returnCarTime;
                                console.log("还车时间为:" + returnCarTime);
                                var orderStatus = orderLi[i].myOrder.status;
                                console.log("订单状态为:" + orderStatus);

                                if (orderStatus == 1)
                                    orderStatus = "进行中";
                                else if (orderStatus == 0)
                                    orderStatus = "已完成";
                                else if (orderStatus == 4)
                                    orderStatus = "已取消";
                                else if (orderStatus == 2)
                                    orderStatus = "已付款"
                                else if (orderStatus == 3)
                                    orderStatus = "待支付"


                                var myOrderEle = '  <td class="row_number"> ' + orderNum + '</td>\n' +
                                    '                                <td class="row-first-cell">\n' +
                                    '                                    ' + carName + '/' + carType + '/' + carShiftType + '/' + carDisplacement + '\n' +
                                    '                                </td >\n' +
                                    '                                <td class="row-second-cell">\n' +
                                    '                                    ' + carTime + '\n' +
                                    '                                </td>\n' +
                                    '                                <td class="row-third-cell">\n' +
                                    '                                    ' + returnCarTime + '\n' +
                                    '                                </td>\n' +
                                    '\n' +
                                    '                                <td>\n' +
                                    '                                    <span class="gray">' + orderStatus + '</span>\n' +
                                    '                                </td>'
                                $(".myOrderList").append(myOrderEle);
                            }

                            var total = result.data.total;
                            console.log("共有" + total + "条数据");
                            var pageNum = result.data.pageNum;
                            console.log("当前是第" + pageNum + "页");
                            var pages = result.data.pages;
                            console.log("共有" + pages + "页");
                            var prePage = result.data.prePage;
                            console.log("上一页是" + prePage);
                            var nextPage = result.data.nextPage;
                            console.log("下一页是" + nextPage);
                            var hasPreviousPage = result.data.hasPreviousPage;
                            var hasNextPage = result.data.hasNextPage;
                            var orderEle;
                            orderEle = '共有<span style="color: #666">' + total + '</span>条数据';
                            orderEle += '当前是第<span style="color: #666">' + pageNum + '</span>页';
                            if (hasPreviousPage) {
                                orderEle += ' <a href="javascript:getByPage(' + custId + ',' + status + ',' + prePage + ')" style="color: #FFB500">上一页</a>';
                            }

                            if (hasNextPage) {
                                orderEle += ' <a href="javascript:getByPage(' + custId + ',' + status + ',' + nextPage + ')" style="color: #FFB500">下一页</a>';
                            }
                            orderEle += ' 共有<span style="color: #666">' + pages + '</span>页';

                            $(".order_page").append(orderEle);
                        }else{
                            $(".myOrderList").html("");
                        }

                    } ,"json")
            }


        }

    } );
</script>
</body>
</html>
